'use strict';

import React from 'react';

import {
    HttpService,
    Toast,
    core_md5
} from '../../utils'

import phone from '../../img/login/phone.png'
import pwd from '../../img/login/pwd.png'
import user from '../../img/login/user.png'
import code_ from '../../img/login/code.png'
import {
    R_header
} from '../common/index'

class register extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor() {
        super();
        this.state = {
            disabled: false,
            text: '获取验证码',
            timer: 119,
            val: '',
            code: ''
        };
        this.countdown = []
    }

    changeValue(e) {
        this.check_phone(e.target.value);
    }

    changeCode(e) {
        this.setState({
            code: e.target.value
        });
    }

    check_phone(phone) {
        let patt = /^1[34578]\d{9}$/;
        let val = phone;
        this.setState({
            val: val
        });
        if (!val) {
            Toast.toast('手机号不能为空');
            return false;
        } else if (!patt.test(val)) {
            Toast.toast('手机号不正确，请重新输入');
            return false;
        }
        return true
    }

    async sregister(val, code) {
        let pwd = this.refs.pwd.value;
        if (pwd == '' || code == '') {
            Toast.toast('请填写完整信息');
            return;
        }
        if (!this.check_phone(val)) {
            return;
        }
        let regUrl = '/jf/business/companyuser/regist'

        let result = await HttpService.save({
            url: regUrl,
            data: {
                phone: val,
                code: code,
                pwd: pwd
            }
        });

        if (result.code == 50006) {
            clearInterval(this.countdown);
            //调用登录
           const login= await HttpService.query({
                url: '/jf/business/companyuser/login',
                data: {
                    phone: val,
                    pwd: pwd
                }
            });
           if(login.code==50006){
               localStorage.btoken=login.data.token;
               this.context.router.push('/businessIndex');
               return;
           }else{

           }

        } else if (result.code == 50007) {

        }
        Toast.toast(result.data);
    }

    async getCode(phone) {
        if (!this.check_phone(phone)) {
            return;
        }
        if (this.state.disabled) {
            return;
        }
        let smsto = 0;
        let smsUrl = '/jf/business/companyuser/generateSMSCode'
            const code = await HttpService.save({
                url: smsUrl,
                data: {
                    phone: phone,
                    module: 'reg',
                }
            });
            if (code.code ==50006) {
                var timer = this.state.timer;
                this.setState({
                    disabled: true,
                    text: timer + '秒后重发'
                });
                this.countdown = setInterval(() => {
                    timer--;
                    if (timer <= 0) {
                        this.setState({
                            disabled: false,
                            text: '获取验证码',
                            timer: 119
                        });
                        clearInterval(this.countdown);
                        return;
                    }
                    this.setState({
                        disabled: true,
                        text: timer + '秒后重发',
                        timer
                    })
                }, 1000);
            } else {
                Toast.toast(code.data)
            }

    }

    render() {
        let {
            val,
            code
        } = this.state;
        return (
            <div className="register">
                <R_header title="注册" left="1"/>
                <div className="app-login app-padding-lr24 app-margin-t30">
                    <div className="card">
                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 _app-margin-right24">
                                <img className="app-wh100-all-radius" src={phone}/>
                            </div>
                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" onBlur={this.changeValue.bind(this)} placeholder="手机号" type="number"/>
                            </div>
                            <div className="s-flex1 s-j-end app-666-font30">
                                <div className={"login-code step s" + this.state.disabled} onClick={this.getCode.bind(this, val)}>
                                    <div className="s-flex1 s-j-center">{this.state.text}</div>
                                </div>
                            </div>
                        </div>
                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 app-margin-right24">
                                <img className="app-wh100-all-radius" src={code_}/>
                            </div>
                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" placeholder="输入短信验证码" type="number" onChange={this.changeCode.bind(this)}/>
                            </div>
                        </div>
                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 app-margin-right24">
                                <img className="app-wh100-all-radius" src={pwd}/>
                            </div>
                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" ref="pwd" placeholder="6-20位字符密码，区分大小写" type="password"/>
                            </div>
                        </div>
                    </div>
                    <div className="step app-yellow-radius-check-button login-btn" onClick={this.sregister.bind(this, val, code)}>
                        <div className="s-center">开通并登录</div>
                    </div>
                </div>
            </div>
        )
    }
}

export default register
